<template>
  <div class="front-frame">
    <!-- 课程信息 -->
    <div class="course-section">
      <div class="course-header">
        <h2>课程信息</h2>
        <el-link type="primary" @click="$router.push('/front/course')">更多</el-link>
      </div>
      <el-table :data="joinedCourses" style="width: 100%" v-if="joinedCourses.length">
        <el-table-column prop="id" label="ID" width="80"></el-table-column>
        <el-table-column prop="title" label="课程名称" width="200"></el-table-column>
        <el-table-column prop="description" label="描述"></el-table-column>
        <el-table-column prop="teacherId" label="教师姓名" width="120">
          <template #default="{ row }">
            {{ getTeacherName(row.teacherId) }}
          </template>
        </el-table-column>
        <el-table-column prop="category" label="分类" width="120"></el-table-column>
      </el-table>
      <el-empty v-else description="暂无已加入的课程" />
    </div>

    <!-- 公告信息 -->
    <div class="announcement-section">
      <div class="announcement-header">
        <h2>公告信息</h2>
        <el-link type="primary" @click="$router.push('/front/announcement')">更多</el-link>
      </div>
      <el-card shadow="hover">
        <el-collapse>
          <el-collapse-item
            v-for="announcement in announcementList"
            :key="announcement.id"
            :title="announcement.title"
          >
            <div>{{ announcement.content }}</div>
          </el-collapse-item>
        </el-collapse>
      </el-card>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue';
import { ElMessage } from 'element-plus';
import { useCourseStore } from '@/stores/api/course';
import { useCourseJoinStore } from '@/stores/api/course-join';
import { useUserStore } from '@/stores/api/user';
import { useAnnouncementStore } from '@/stores/api/announcement';

const courseStore = useCourseStore();
const courseJoinStore = useCourseJoinStore();
const userStore = useUserStore();
const announcementStore = useAnnouncementStore();

const joinedCourses = ref([]);
const announcementList = ref([]);

const getTeacherName = (teacherId: number) => {
  const teacher = userStore.users.find(t => t.id === teacherId);
  return teacher ? teacher.realName : '未知';
};

const fetchJoinedCourses = async () => {
  if (!userStore.user?.id) {
    joinedCourses.value = [];
    return;
  }
  try {
    const joins = await courseJoinStore.fetchJoinRequestsByStudent(userStore.user.id);
    const approvedJoins = joins.filter((join: any) => join.status === 'APPROVED');
    const courseIds = approvedJoins.map((join: any) => join.courseId);
    joinedCourses.value = courseStore.courses.filter(course => courseIds.includes(course.id));
  } catch (error) {
    ElMessage.error('获取已加入课程失败');
    joinedCourses.value = [];
  }
};

onMounted(async () => {
  try {
    await courseStore.fetchCourses();
    await userStore.fetchUsers();
    await fetchJoinedCourses();
    const announcementData = await announcementStore.fetchAnnouncements();
    announcementList.value = announcementData;
  } catch (error: any) {
    ElMessage.error('加载数据失败: ' + error.message);
  }
});
</script>

<style scoped>
.front-frame {
  width: 80%;
  margin: 40px auto 0 auto;
}

.course-section {
  margin-bottom: 40px;
}

.course-header,
.announcement-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.course-header h2,
.announcement-header h2 {
  font-size: 24px;
  color: #333;
  flex-grow: 1;
  text-align: center;
}

.course-header .el-link,
.announcement-header .el-link {
  flex-shrink: 0;
}

.course-section .el-card,
.announcement-section .el-card {
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.course-section .el-table {
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.el-collapse {
  border: none;
  background-color: transparent;
}

.el-collapse-item__header {
  font-size: 16px;
  color: #333;
  padding: 10px 20px;
  background-color: transparent;
  border-bottom: 1px solid #ebeef5;
}

.el-collapse-item__content {
  padding: 10px 20px;
  font-size: 14px;
  color: #666;
  line-height: 1.6;
}
</style>